<template>
	<view>
		<swiper class="card-swiper round-dot" duration="500" circular autoplay indicator-dots
		        indicator-active-color="#0081ff" indicator-color="#8799a3"
		        interval="5000" current="0" @change="swiper" @click="previewImage">
		
		    <swiper-item  v-for="(item,index) in swiperList" 
			:key="item.id" :class="curCard==index?'cur':''">
				<view class="swiper-item">
					
					<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
				</view> 		
		        
				
		    </swiper-item>
		
		</swiper> 
	</view>
</template>

<script>
	var _self;
	export default {
		name:'mySwiper',
		data() {
			return {
				curCard: 0
			};
		},
		
		props:{
			swiperList:{
			  type:Array,
			  default:[]
			}
		},
		
		methods:{
			swiper(e) {
			   _self.curCard = e.detail.current;
			   
			},
			previewImage(){
				var urls = [];
				_self.swiperList.forEach(function(value){
					urls.push(value.url);
				})	
				// console.log(urls);
				uni.previewImage({
					urls:urls,
					loop:true,
					indicator:"default"
				})
			}
		},
		
		created() {
			_self = this;
		}
		
	}
</script>

<style>

</style>
